<script setup>
import useUserStore from '@/store/modules/user'
import {listByAdmin as getDangKouList} from '@/api/system/dangkou'
import {listUserAll as getCangKuList} from '@/api/system/cangku'
import {listAll as getPinLeiList} from '@/api/system/huopinpinlei.js'
import {useRouter, useRoute} from 'vue-router';
import {isNull, isNotNull} from "@/utils/validate.js";

const { proxy } = getCurrentInstance();

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const dangKouList = ref([]);
const dangKouSelect = ref(-1);

const pinLeiList = ref([]);
const pinLeiSelect = ref(-1);

const riQiList = ref([]);
const riQiSelect = ref("");


async function loadDangKouList() {
  const rsp = await getDangKouList({adminId: userStore.id});
  dangKouList.value = rsp.data;
  if(isNotNull(dangKouList.value)){
    dangKouSelect.value = dangKouList.value[0];
  }
}

loadDangKouList();

async function loadPinLeiList() {
  const rsp = await getPinLeiList();
  pinLeiList.value = rsp.data;
}

loadPinLeiList();


function getDatesForNextThreeDays() {
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  for (let i = 0; i <= 2; i++) {
    let nextDay = new Date(today);
    nextDay.setDate(today.getDate() + i + 1);
    riQiList.value.push(nextDay.toISOString().split('T')[0]); // 格式化为 YYYY-MM-DD
  }

}

getDatesForNextThreeDays();

riQiSelect.value = riQiList.value[0];


function selectDangKou(row) {
  dangKouSelect.value = row;
}

function selectPinLei(row){
  pinLeiSelect.value = row;
}

function selectRiQi(riQi) {
  riQiSelect.value = riQi;
}


function selectCaiPin() {
  let params = {
    type: 'add',
    id: null,
    dangKouId: dangKouSelect.value.id,
    dangKouName: dangKouSelect.value.name,
    cangKuId: null,
    cangKuName: null,
    pinLeiId: pinLeiSelect.value.id,
    pinLeiName: pinLeiSelect.value.name,
    riQi: riQiSelect.value,
  }

  if(isNull(params.dangKouId)){
    proxy.$modal.msgError("请选择档口！");
    return ;
  }

  if(isNull(params.pinLeiId)){
    proxy.$modal.msgError("请选择品类！");
    return ;
  }

  if(isNull(params.riQi)){
    proxy.$modal.msgError("请选择日期！");
    return ;
  }

  router.push({name: "SelectCaiPin", query: params});

}

</script>

<template>
  <div>
    <div class="dang-kou-list-area">
      <el-icon>
        <House/>
      </el-icon>
      <el-text class="list-name" size="large">需求单位</el-text>


      <div class="list-area">
        <div v-for="item in dangKouList" class="dangk-kou-item">
          <div v-if="dangKouSelect.id === item.id" class="list-item-select">{{ item.name }}</div>
          <div v-else class="list-item" @click="selectDangKou(item)">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <el-divider/>

    <div class="cang-ku-list-area">
      <el-icon>
        <House/>
      </el-icon>
      <el-text class="list-name" size="large">货品品类</el-text>

      <div class="list-area">
        <div v-for="item in pinLeiList" class="cang-ku-item">
          <div v-if="pinLeiSelect.id === item.id" class="list-item-select">{{ item.name }}</div>
          <div v-else class="list-item" @click="selectPinLei(item)">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <el-divider/>

    <div class="ri-qi-list-area">
      <el-icon>
        <House/>
      </el-icon>
      <el-text class="list-name" size="large">供应日期</el-text>

      <div class="list-area">
        <div v-for="item in riQiList" class="ri-qi-item">
          <div v-if="riQiSelect === item" class="list-item-select">{{ item }}</div>
          <div v-else class="list-item" @click="selectRiQi(item)">{{ item }}</div>
        </div>
      </div>
    </div>
    <el-divider/>

    <div class="btn-area">
      <el-button type="primary" class="ok-btn" @click="selectCaiPin()">下一步</el-button>
    </div>

  </div>
</template>

<style scoped lang="scss">

.dang-kou-list-area,
.cang-ku-list-area,
.ri-qi-list-area,
.shi-jian-list-area {
  padding: 10px;

  .list-name {
    font-weight: bold;
    margin-left: 5px;
  }

  .list-area {
    margin-top: 20px;

    display: flex;
    flex-direction: row; // 主轴方向row横排 | row-reverse倒横排 | column竖排 | column-reverse倒竖排
    flex-wrap: wrap; // 主轴换行方式：nowrap不换行 | wrap换行且第一行在上方 | wrap-reverse换行且第一行在下方
    justify-content: flex-start; // 主轴上的对齐方式: flex-start左对齐 | flex-end右对齐 | center居中 | space-between两端对齐且项目之间的间隔都相等 | space-around每个项目两侧的间隔相等
    align-items: center; // 副轴对齐方式，flex-start起点对齐 | flex-end终点对齐 | center中点对齐 | baseline基线对齐 | stretch如果项目未设置高度或设为auto，将占满整个容器的高度

    .list-item {
      font-weight: bolder;
      margin: 5px;
      padding: 5px;
      border-radius: 5px;
      border: 1px solid lightgray;
      background-color: #f9f6f7;
    }

    .list-item-select {
      color: #35c3a4;
      font-weight: bolder;
      margin: 5px;
      padding: 5px;
      border-radius: 5px;
      border: 1px solid lightgray;
      background-color: #f1fdfa;
    }
  }

}


.btn-area {

  margin-top: 40px;

  .ok-btn {
    margin-left: 5%;
    background-color: #0cc89d;
    width: 90vw;
  }

}


</style>